<template>
  <div class="wrapper">
    <div class='top'>
      <img src="../../../static/zfcg.svg">
      <p>支付成功!</p>
    </div>
    <div class="bottom">
      <MsgItem title="订单号" :value="this.order_code"></MsgItem>
      <MsgItem title="支付金额" :value="'￥' + this.total"></MsgItem>
    </div>
  </div>
</template>

<script>
  import MsgItem from '@/components/msgItem/MsgItem.vue'
  export default {
    name: 'PayComplete',
    components: {
      MsgItem
    },
    mounted() {
      //console.log(this.$store.state.payOrder)
      this.sendcode()
      this.$store.commit('pushList', [])
      this.$store.commit('payGoods', [])
      /* this.$store.commit('payOrder', {}) */
    },
    destroyed(){
      this.$store.commit('payOrder', {})
    },
    data() {
      return {
        order_code: this.$store.state.payOrder.order_code,
        total: this.$store.state.payOrder.subtotal?this.$store.state.payOrder.subtotal:'0'
      }
    },
    methods:{
      async sendcode(){
        let formData = new FormData()
        formData.append('openid', this.$store.state.openId)
        formData.append('order', this.order_code)
        formData.append('price', this.total)
        let { data: { code, data } } = await this.$axios({
          url: '/v1/send/sendcode',
          method: 'POST',
          data: formData
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    background: #eee;
    height: 100vh;
  }
  .top {
    width: 100%;
    height: 6rem;
    text-align: center;
    overflow: hidden;
    background: #fff;
    img {
      display: block;
      margin: 1rem auto 0.4rem;
      width: 3rem;
    }
    p {
      font-size: 0.36rem;
    }
  }
  .bottom {
    margin-top: 0.2rem;
    background: #fff;
  }
</style>
